import React from 'react';
import { Button, Form, Input, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Link, history, useDispatch } from 'umi';
import { request } from '@/utils';

function login() {
  const dispatch = useDispatch()
  const onFinish = (values: any) => {
    request("user/login", values, res => {
      localStorage.token = res.Token
      dispatch({ type: "global/saveCurrentUser", currentUser: res })
      history.replace("/")
    }, res => message.error(res))
  };
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      height: '100%',
      paddingTop: '10%'
    }}>
      <h3 style={{
        marginBottom: 36,
      }}>React Starter</h3>
      <Form
        name="normal_login"
        style={{
          maxWidth: 300,
        }}
        initialValues={{}}
        onFinish={onFinish}
      >
        <Form.Item
          name="name"
          rules={[{ required: true, message: '请输入用户名!' }]}
        >
          <Input prefix={<UserOutlined />} placeholder="用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input
            prefix={<LockOutlined />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" style={{
            width: '100%'
          }}>
            登录
        </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default login;
